<template>
  <div>
    <div v-show="searchVisible" class="top-search">
      <el-form ref="advancedSearchRef" :model="advancedSearch">
        <el-row :gutter="20" style="margin-bottom: 10px">
          <el-col>
            <span class="textCss">名字 :</span>
            <el-input
              v-model="advancedSearch.name"
              prop="name"
              placeholder="名字"
              style="width: 230px"
            >
            </el-input>
            <span class="textCss">身份证号码 :</span>
            <el-input
              v-model="advancedSearch.idCard"
              prop="loginNumber"
              placeholder="身份证"
              style="width: 230px"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <span class="textCss">年度 :</span>
            <el-select v-model="advancedSearch.sex" placeholder="年度">
              <el-option
                v-for="item in selectData.sex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span class="textCss">批次 :</span>
            <el-select v-model="advancedSearch.sex" placeholder="批次">
              <el-option
                v-for="item in selectData.sex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div class="footer-button">
              <el-button type="primary" plain @click="allSearch"
                >查询</el-button
              >
              <el-button type="info" plain @click="reset">重 置</el-button>
              <el-button @click="searchVisible = false">关 闭</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 顶部功能按钮开始 -->
    <el-header class="top_button">
      <div class="left-panel">
        <el-button type="danger" plain>申请上站</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <div class="mt-4">
            <el-input placeholder="查询内容" class="input-with-select">
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="姓名" value="姓名" />
                  <el-option label="性别" value="性别" />
                  <el-option label="批次" value="批次" />
                  <el-option label="网登编号" value="网登编号" />
                  <el-option label="户籍类型" value="户籍类型" />
                  <el-option label="学历" value="学历" />
                  <el-option label="民族" value="民族" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
                ></el-button>
              </template>
            </el-input>
          </div>

          <el-button type="primary" plain @click="searchVisible = true"
            >高级查询</el-button
          >
        </div>
      </div>
    </el-header>
    <MyTable :columns="columns" ref="tableRef" :data="allList">
      <el-table-column type="selection" width="55" />
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :fixed="index == 0"
          :label="item.name"
          :prop="item.prop"
          v-if="item.show"
          show-overflow-tooltip
          width="180"
        />
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </MyTable>
    <!-- 分页区开始 -->
    <div class="page">
      <el-pagination
        v-model:currentPage="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 分页区结束 -->
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { getpassInfo } from "@/api/conscription/passExamine";

export default defineComponent({
  name: "passExamine",
  setup() {
    //   类似vue2的data
    const state = reactive({
      // 高级查询
      fiexdSearchForm: false,
      columns: [
        { name: "姓名", show: true, prop: "name" },
        { name: "性别", show: true, prop: "sex" },
        { name: "年度", show: true, prop: "year" },
        { name: "批次", show: true, prop: "batch" },
        { name: "身份证", show: true, prop: "idCard" },
        { name: "网登编号", show: true, prop: "loginId" },
        { name: "年龄", show: true, prop: "age" },
        { name: "民族", show: true, prop: "nation" },
        { name: "户籍类型", show: true, prop: "householdType" },
        { name: "学历", show: true, prop: "cultureProgram" },
        { name: "应征地", show: true, prop: "bingyiPlace" },
        { name: "练习电话号码", show: true, prop: "phone" },
        { name: "登记报名时间", show: true, prop: "registTime" },
        { name: "初检状态", show: true, prop: "medicalCondition" },
        { name: "上站状态", show: true, prop: "upState" },
      ],
      allList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 1,
      // 高级检索控制
      searchVisible: false,
      advancedSearch: {},
      selectData: {},
    });
    onMounted(() => {
      Methods.getPassExamine();
    });
    const Methods = {
      // 分页获取应征人员
      async getPassExamine() {
        var res = await getpassInfo.get(state.pageInfo);
        console.log(res);
        if (res.code === 200) {
          state.allList = res.data.records;

          state.total = res.data.total;
        }
      },
      // 编辑表单开始结束  后面改
      changeColumn(columns) {
        this.columns = columns;
        // this.$refs.table.doLayout()
      },
      // 条数
      handleSizeChange() {
        Methods.getPassExamine();
      },
      // 页数
      handleCurrentChange() {
        Methods.getPassExamine();
      },
    };
    return {
      ...toRefs(state),
      ...Methods,
    };
  },
});
</script>

<style scoped>
.form-closex {
  display: flex;
}
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.top-search {
  width: 100%;
  margin-top: 10px;
}
.top-search .textCss {
  font-size: 15px;
  margin-left: 30px;
  margin-right: 10px;
  display: inline-block;
  width: 85px;
  text-align: center;
}
.top-search .inputCss {
  width: 210px;
}
.btnModel {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-left: 30px;
  /* margin-right: 5px; */
}
.footer-button {
  margin-left: 80px;
  display: inline-block;
}
.top_button {
  display: flex;
  justify-content: space-between;
}
.bottom-btn {
  margin-top: 10px;
  margin-left: 28px;
}
</style>



